import React from 'react';
import ReactDOM from 'react-dom';
import './css/style.css';
import StaffSearch from './StaffSearch';
import StaffItemPanel from './StaffItemPanel';
import StaffAdd from './StaffAdd';

import Staff from './Staff';

class App extends React.Component {
    constructor(){
        super();
        this.state = {
            staff : new Staff
        };
    }

    //搜索     
    searchStaff(word) {
        this.setState({
            staff: this.state.staff.searchStaff(word)
        });
    }

    //删
	removeStaffItem(key){
	    this.setState({
		    staff: this.state.staff.removeStaffItem(key)
		});
	}

    //增
    addStaffItem(item){
        this.setState({
            staff: this.state.staff.addStaffItem(item)
        });
    }  
    
    filtStaff(filtType) {
	    this.setState({
		    staff: this.state.staff.filtStaff(filtType)
		});
	}

    render(){
      return (
        <div className="box">
          <StaffSearch searchStaff={this.searchStaff.bind(this)} filtStaff={this.filtStaff.bind(this)} />
          <StaffItemPanel items={this.state.staff.staff} removeStaffItem={this.removeStaffItem.bind(this)} />
          <StaffAdd addStaffItem={this.addStaffItem.bind(this)}/>
        </div>
      );
    }
}

ReactDOM.render(<App />,document.getElementById('root'));

